<template>
  <div class="myTopic">
    <div class="center" v-for="(item,index) in topicList" :key="index">
      <div class="container">
        <div class="container-top">
          <div class="container-top-img">
            <img :src="item.face" alt="" />
          </div>
          <div class="container-top-center">
            <div class="container-top-true">
              <div class="container-top-title">
                <div class="container-top-one">
                  <span>{{ item.nick_name }}</span>
                  <div class="container-lable-yd">
                    <span v-if="item.status == 1" class="pass">已通过</span>
                    <span v-if="item.status == 2" class="noPass">未通过</span>
                    <span v-if="item.status == 3" class="examine">待审核</span>
                  </div>
                </div>
                <div class="container-top-two">{{ item.creattime }}</div>
              </div>
              <div class="title">{{ item.title }}</div>
              <div class="container-contoin">
                {{ item.content }}
              </div>
              <div class="main-container" v-if="item.type == 1">
                <div
                  class="img-box"

                >
                  <img
                    class="main-img"
                    v-for="(v, i) in item.thumbs.split(',')"
                    :key="i"
                    :src="v"
                    alt=""
                  />
                </div>
              </div>
              <div v-if="item.type == 2" class="container-video">
                <video controls class="video-bb"  :src="item.video_url"></video>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-but" v-if="item.status == 1">
        <div class="ribbon">
          <Icon type="ios-star-outline" /> <span>{{ item.is_comits }}</span>
        </div>
        <div class="ribbon">
          <Icon type="ios-star-outline" /> <span>{{ item.is_like }}</span>
        </div>
        <div class="ribbon">
          <Icon type="ios-star-outline" /> <span>{{ item.is_sc }}</span>
        </div>
        <div class="ribbon npk">
          <Icon type="ios-star-outline" /> <span>{{ item.is_zf }}</span>
        </div>
      </div>
      <div v-if="item.status == 2" class="nopass">
        <div class="text">审核不通过理由:帖子涉嫌敏感词,且不符合社区规范</div>
        <div class="btn-box">
          <div class="edit" @click="editClick(item)">修改</div>
          <div class="del" @click="deleteone(item.id)" >删除</div>
        </div>
      </div>
      <div v-if="item.status == 3" class="nopass">
        <div class="text">帖子涉嫌敏感词,等待管理员审核</div>
        <div class="btn-box">
          <div class="del" @click="deleteone(item.id)">删除</div>
        </div>
      </div>
      <Modal
        v-model="editShow"
        :mask-closable="false"
        title="编辑"
        width="800"
        ok-text="发布"
        @on-ok="handleSubmit('formValidate')">
        <div style="height: 280px">
          <Form style="padding-top: 10px" ref="formValidate" :label-width="0" :model="formValidate" :rules="ruleValidate">
            <FormItem label="" prop="titleText">
              <Input v-model="formValidate.titleText" maxlength="20" style="width: 400px" placeholder="请填写标题(必填，最多20字)"></Input>
            </FormItem>
            <FormItem label="" prop="contText">
              <Input v-model="formValidate.contText" type="textarea" maxlength="300" placeholder="请填写正文(必填)"></Input>
            </FormItem>
          </Form>

          <div class="live">
            <div class="live-left">
              <Poptip placement="bottom-start" popper-class="popCla" width="400" word-wrap>
                <Icon type="ios-paper-outline" />图片
                <div class="text type-box" slot="content">
                  <div class="sub-box">
                    <div class="demo-upload-list" v-for="(img, index) in uploadList" :key="index">
                      <img :src="img">
                      <div class="demo-upload-list-cover">
                        <!--<Icon type="ios-eye-outline" @click.native="handleView(img)"></Icon>-->
                        <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
                      </div>
                    </div>
                    <Upload
                      :show-upload-list="false"
                      :on-success="handleSuccess"
                      :on-format-error="handleSuccessLu"
                      :before-upload="handleBeforeUpload"
                      :format="['jpg','jpeg','png']"
                      :action="action"
                      :headers="accessToken"
                      style="display: inline-block;width:60px;">
                      <div class="hover-pointer icon-upload" style="width: 60px;height: 60px;text-align: center;line-height: 60px">
                        <Icon type="ios-camera" size="20"></Icon>
                      </div>
                    </Upload>
                  </div>
                </div>
              </Poptip>
              <Poptip placement="bottom-start" popper-class="popCla" width="400"  style="margin-left: 20px">
                <Icon type="logo-youtube" />视频
                <div class="text type-box" slot="content">
                  <div class="sub-box">
                    <div class="demo-upload-list" style="width: 100px" v-for="(img, index) in uploadListVideo" :key="index">
                      <video
                        style="width: 100px"
                        :src="img"
                      >
                      </video>
                      <div class="demo-upload-list-cover">
                        <Icon type="ios-trash-outline" @click.native="handleRemoveVideo(index)"></Icon>
                      </div>
                    </div>
                    <Upload
                      :show-upload-list="false"
                      :on-success="handleSuccessVideo"
                      :on-format-error="handleSuccessVideoLu"
                      :before-upload="handleBeforeUploadVideo"
                      :format="['mp4','avi']"
                      :action="action"
                      :headers="accessToken"
                      style="display: inline-block;width:60px;">
                      <div class="hover-pointer icon-upload" style="width: 100px;height: 100px;text-align: center;">
                        <div style="padding: 5px 0"><span style="font-size: 16px;">上传视频</span> <span style="color: #999999">支持上传MP4格式文件，不超过1GB</span></div>
                        <div style="padding-top: 10px;border: 1px #e8e8e8 solid;width: 60px;height: 60px;color: #999999">
                          <div>上传视频</div>
                          <Icon type="md-add" size="20"></Icon>
                        </div>
                      </div>
                    </Upload>
                  </div>
                </div>
              </Poptip>
            </div>
            <div class="live-right">
              <Cascader :data="typeList" v-model="value1" :load-data="loadData" @on-change="casChange">
                <div class="defult">
                  <div>
                    {{ defultcircle }}
                  </div>
                  <Icon type="ios-arrow-down"></Icon>
                </div>
              </Cascader>
              <!--<button class="sub" @click="handleSubmit('formValidate')">发布</button>-->
            </div>
          </div>
        </div>
      </Modal>
    </div>
  </div>
</template>

<script>
import { myallin,ptdelet,getChosList,getChosStatus,editChosInfo } from "@/api/community";
import { time } from "@/config/time";
import { commonUrl } from '@/plugins/request';
export default {
  data() {
    return {
      topicList:[],
      editShow:false,
      editRow:{},
      value1: ['0'],
      defultcircle: "草稿",
      typeList: [
        {
          value: "0",
          label: "公开的",
          children: [],
        },
        {
          value: "1",
          label: "同步圈子",
          children: [],
          loading: false
        },
        {
          value: "2",
          label: "仅自己可见",
          children: [],
        },
        {
          value: "3",
          label: "草稿",
          children: [],
        },
      ],
      formValidate:{
        titleText:'',
        contText:'',
      },
      ruleValidate: {
        titleText: [
          { required: true, message: '请填写标题(必填，最多20字)', trigger: 'blur' }
        ],
        contText: [
          { required: true, message: '请填写正文(必填)', trigger: 'blur' }
        ],
      },
      action: commonUrl + '/common/common/upload/file', // 上传地址
      accessToken: {}, // 验证token
      uploadList:[],
      uploadListVideo:[],
    };
  },
  mounted() {
    this.mytopic();
  },
  watch: {
    deleteone(v){
      this.mytopic()
    }
  },
  methods: {
    editClick(row){
      console.log(row);
      this.formValidate.titleText = row.title
      this.formValidate.contText = row.content
      this.value1[0] = row.push_status.toString()
      this.uploadList = row.thumbs ? row.thumbs.split(',') : []
      this.uploadListVideo = row.video_url ? row.video_url.split(',') : []
      this.editRow = row
      this.editShow = true
    },
    casChange(val){
      if(val[0] == '1'){
        let params = {
          id:val[1],
          mid:JSON.parse(localStorage.userInfo).id,
        }
        getChosStatus(params).then((res) =>{
          if(res.code !== 1) this.$Message.error(res.msg || '该圈子不能发表!');
        })
      }
      if(val[0]){
        this.defultcircle = this.typeList.filter((a) =>{return a.value == val[0]})[0].label
      }
      if(val[0] && val[1]){
        this.defultcircle = this.typeList.filter((a) =>{return a.value == val[0]})[0].label
          + '·' + this.typeList[1].children.filter((a) =>{return a.value == val[1]})[0].label
      }

    },
    loadData(item,callback){
      item.loading = true
      setTimeout(()=>{
        if(item.value == '1'){
          let fow={
            id:1,
            mid:JSON.parse(localStorage.userInfo).id,
          };
          getChosList(fow).then((res) =>{
            if(res.code == 1){
              item.children = res.data.map((a) =>{
                return {
                  value: a.id,
                  label:a.title
                }
              })
              item.loading = false;
              callback()
            }else {
              this.$Message.error(res.msg || '获取圈子失败!');
            }
          })
        }
      },1000)
    },
    // 上传图片
    handleRemove (index) { // 移除图片
      this.uploadList.splice(index, 1)
      this.$forceUpdate()
    },
    //上传失败
    handleSuccessLu(error, file, fileList){
      this.$Notice.warning({
        title: "请上传正确的图片格式",
      });
    },
    handleSuccess (res, file) { // 上传成功回调
      this.uploadList.push(res.result)
      this.$forceUpdate()
    },
    handleBeforeUpload () { // 上传之前钩子函数
      const check = this.uploadList.length < 6;
      if (!check) {
        this.$Notice.warning({
          title: '最多可以上传六张图片'
        });
        return check;
      }
    },
    //上传视频
    handleRemoveVideo (index) { // 移除图片
      this.uploadListVideo.splice(index, 1)
      this.$forceUpdate()
    },
    //上传失败
    handleSuccessVideoLu(error, file, fileList){
      this.$Notice.warning({
        title: "请上传正确的MP4视频格式",
      });
    },
    handleSuccessVideo (res, file) { // 上传成功回调
      this.uploadListVideo.push(res.result)
      this.$forceUpdate()
    },
    handleBeforeUploadVideo () { // 上传之前钩子函数
      const check = this.uploadListVideo.length < 3;
      if (!check) {
        this.$Notice.warning({
          title: '最多可以上传3张图片'
        });
        return check;
      }
    },
    //发布分享
    handleSubmit(name){
      let params = {
        mid:JSON.parse(localStorage.userInfo).id,
        id:this.editRow.id || '',
        title: this.formValidate.titleText,
        content: this.formValidate.contText,
        push_status: this.value1[0] || '',
        circlelist_id: this.value1[1] || '',
        act_id: '',
        thumbs: this.uploadList.join(','),
        video_url: this.uploadListVideo.join(','),
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          editChosInfo(params).then((res) =>{
            if(res.code == '1'){
              this.$Message.success("发布成功")
              this.mytopic();
            }else {
              this.$Message.error(res.msg || '发布失败!');
            }
          })
        }
      })
    },
    // modal
    ok() {
      this.$Message.info('Clicked ok');
    },
    cancel () {
      this.$Message.info('Clicked cancel');
    },
    // 删除
    deleteone(v){
      this.deledata(v)
    },
    // 删除接口
    deledata(v){
      let n={
        ids:v,
        mid:JSON.parse(localStorage.userInfo).id,
      }
      ptdelet(n).then(res=>{
        console.log(res,'删除接口');
        if(res.code==1){
          this.mytopic()
        }
      })
    },
    // 渲染
    mytopic() {
      let par = {
        mid:JSON.parse(localStorage.userInfo).id,
        page: 1,
        pagesize: 1000,
      };
      myallin(par).then((res) => {
        console.log(res, "自己的话题");
        if (res.code == 1) {
          this.topicList = res.data;
          this.topicList.map((i) => {
            i.creattime = time.getTime(i.creattime);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.myTopic {
  width: calc(1650 / 1920 * 100vw);
  background: #fff;
  position: absolute;
  top: calc(350 / 1920 * 100vw);
  left: calc(240 / 1920 * 100vw);
  padding: calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw)
    calc(40 / 1920 * 100vw);
  .center {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    .container {
      width: 100%;

      border-radius: 6px;
      background-color: #fff;

      .container-top {
        width: 100%;
        padding-top: 12px;
        display: flex;
        justify-content: flex-start;
        .container-top-img {
          cursor: pointer;
          width: 28px;
          height: 100%;
          margin-left: 12px;
          > img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
          }
        }
        .container-top-center {
          width: 100%;
          height: 100%;
          padding-right: 45px;
          .container-top-true {
            width: 100%;
            height: 100%;
            .container-top-title {
              width: 100%;
              height: 38px;
              display: flex;
              flex-wrap: wrap;
              margin-bottom: 9px;
              .container-top-one {
                width: 100%;
                height: 14px;
                font-size: 8px;
                font-weight: 500;
                color: #333333;
                display: flex;
                align-items: center;
                justify-content: flex-start;

                .container-lable-yd {
                  width: auto !important;
                  padding: 0 6px;
                  height: 11px;
                  background: #fcf0f0;
                  border-radius: 2px;
                  width: 20px;
                  font-size: 7px;
                  font-weight: 400;
                  color: #fd5151;
                  line-height: 11px;
                  margin-left: 10px;
                  .noPass {
                    background-color: #f00;
                    color: #fff;
                    padding: 3px 5px;
                    border-radius: 2px;
                  }
                  .pass {
                    background-color: #0f0;
                    color: #fff;
                    padding: 3px 5px;
                    border-radius: 2px;
                  }
                  .examine {
                    background-color: yellow;
                    color: #fff;
                    padding: 3px 5px;
                    border-radius: 2px;
                  }
                }
              }
              .container-top-two {
                width: 100%;
                height: 14px;
                font-size: 7px;

                font-weight: 400;
                color: #acacac;
              }
            }
            .title {
              font-weight: bold;
              margin-bottom: 10px;
            }
            .container-contoin {
              cursor: pointer;
              margin-bottom: 12px;
              font-size: 8px;
              font-weight: 400;
              color: #333333;
              line-height: 14px;
            }
            .main-container {
              width: 100%;
              display: flex;
              .img-box {
                width: 100%;
                .main-img {
                  cursor: pointer;
                  width: 15%;
                  display: inline-block;
                  height: 86px;
                  background: #fd5151;
                  border-radius: 3px;
                  margin-bottom: 7px;
                }
                .imgList {
                  width: 100%;
                  .imgList-img {
                    width: 50px;
                    height: 50px;
                    margin: 10px;
                  }
                }
              }
            }
            .container-video {
              width: 300px;
              height: 200px;
              .video-bb {
                width: 100%;
                height: 178px;
              }
            }
          }
        }
      }
    }
    .container-but {
      width: 100%;
      height: 36px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid #ececec;
      .ribbon {
        width: 25%;
        height: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ececec;
      }
      .npk {
        border-right: none;
      }
    }
    .nopass {
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      .text {
        color: #ccc;
      }
      .btn-box {
        display: flex;
        .edit {
          color: blue;
        }
        .del {
          color: red;
          margin-left: 30px;
        }
      }
    }
  }
}
// modal
.top {
  background-color: #fff;
  padding: 10px;
  .top-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .youlive {
      width: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      span {
        // display: inline-block;
        width: 100%;
      }
      .draft {
        cursor: pointer;
      }
    }
    .top-header-input {
      width: 100%;
      ::v-deep.top-input {
        margin: 10px 0;
        width: 100% !important;
      }
    }
  }
  .textarea {
    width: 100%;
    height: 100px;
    // border: 1px solid #f00;
    outline: #f00;
    padding: 10px;
    resize: none;
  }

}
.live {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .live-left,
  .live-right {
    /*margin-right: 70px;*/
    display: flex;
    align-items: center;
  }
  .live-left {
    .popCla{
      .type-box {
        display:flex;
        align-items:center;
        cursor: pointer;
        .sub-box {
          display:flex;
          align-items:center;
          .demo-upload-list{
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0,0,0,.2);
            margin-right: 4px;

          }
          .demo-upload-list img{
            width: 100%;
            height: 100%;
          }
          .demo-upload-list-cover{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
          }
          .demo-upload-list:hover .demo-upload-list-cover{
            display: block;
          }
          .demo-upload-list-cover i{
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
            z-index: 9999;
          }
        }
      }
    }
    .video {
      /*margin-left: 20px;*/
    }
  }
  .live-right {
    // .drop {
    cursor: pointer;
    .defult {
      display: flex;
      align-items: center;
    }
    .dropMenu {
      .dropItem {
        display: flex;
        align-items: center;
        .icon {
          width: 20px;
        }
        .title {
          flex: 1;
          text-align: center;
        }
      }
    }
    // }
    .sub {
      cursor: pointer;
      color: #fff;
      background-color: #f00;
      border: none;
      width: 80px;
      height: 30px;
      margin-left: 30px;
    }
  }
}

</style>
